<template>
  <div class="app">
    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header">
          <span>xxx管理系统平台</span>
        </div>
      </template>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
      >
        <!-- prop="adminname"  这个表单元素要rules中adminname后面的校验规则 -->
        <!-- label="用户名" input前面的文案 -->
        <el-form-item label="用户名" prop="adminname">
          <el-input v-model="ruleForm.adminname" />
        </el-form-item>

        <el-form-item style="margin-top: 30px" label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"> Create </el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
      </el-form>

      <template #footer>2025xx</template>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'

// 引入 element-plus 内置两个接口
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { loginReg } from '@/api/user'
import router from '@/router'

// ts接口-》描述对象的样子（有哪些属性-方法）
interface RuleForm {
  adminname: string
  password: string
}
// reactive<RuleForm>
// reactive<泛型>  ---记住
// reactive 函数的返回，限制了 reactive参数的类型和返回值的类型

// 表单的数据对象(跟表单中input 双向绑定)
const ruleForm = reactive<RuleForm>({
  adminname: '',
  password: '',
})

// ref<FormInstance>
// ref<泛型> 限制 ref函数参数的类型和 ref返回返回值的value属性的类型
// FormInstance 是elementPlus内置接口，限制了表达的实例对象的属性和方法
// ruleFormRef 获取的 el-form组件的实例对象
const ruleFormRef = ref<FormInstance>()
// ruleFormRef.value

// FormRules<RuleForm> 限制reactive函数的参数和返回值的类型

// <RuleForm> --这个是上面自己定义的限制子对象的类型
const rules = reactive<FormRules<RuleForm>>({
  // **定义的表单中 adminname字段的校验规则
  // adminame:[多个校验规则对象]
  adminname: [
    // 校验规则对象
    {
      // 是否必须，如果是，formitem前面会生成一个红色*号
      required: true,
      // 验证失败以后的提示
      message: '用户名必须填写',
      // 验证规则什么时候触发
      //blur ->失焦的触发这个校验规则
      // change ->内容的触发这个校验规则
      trigger: 'blur',
    },

    // 长度校验规则
    // {
    //   min: 3,
    //   max: 15,
    //   message: '长度必须 是 3 到 15',
    //   trigger: 'blur',
    // },
    {
      // 正则校验
      // ^开头
      // [a-z]小写字母
      // [a-zA-Z] 大小写字母
      // $表示结束位置
      // {3,15} 3-15位
      // [a-zA-Z_0-9] 大小写字母或者数字或者下划线

      // \w 大小写字母或者数字或者下划线

      // 开头必须是字母，接着可以是数字字母或者下划线（可以出现2-14位），整个字符串长度是3-15位
      // pattern: /^[a-zA-Z][a-zA-Z_0-9]{2,14}$/,
      pattern: /^[a-zA-Z]\w{2,14}$/,
      message:
        '开头必须是字母，接着可以是数字字母或者下划线（可以出现2-14位），整个字符串长度是3-15位',
      trigger: 'blur',
    },
  ],
  password: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 15, message: 'Length should be 3 to 15', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return

  // formEl表单组件对象
  //formEl.validate 触发验证规则
  formEl.validate((valid, fields) => {
    // 校验完毕会调用 参数函数--
    // 参数函数有两个形参
    // -valid 是否验证通过
    // -fields
    // valid
    if (valid) {
      console.log('可以登录!')
      // 调用登录接口
      loginReg(ruleForm.adminname, ruleForm.password).then((r) => {
        console.log(r.data)
        ElMessage(r.data.message)

        if (r.data.code == 200) {
          const token: string = r.data.data.token
          const adminid = r.data.data.adminid as string
          localStorage.setItem('xx-mall-b-token', token)
          localStorage.setItem('xx-mall-b-adminid', adminid)

          router.push('/')
        } else {
        }
      })
    } else {
      console.log('没有验证通过!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  // formEl 表单组件对象
  if (!formEl) return
  // 重置表单中所有元素
  formEl.resetFields()
}
</script>
<style lang="scss" scoped>
.app {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(@/assets/imgs/bg.jpg);
  .el-card {
    width: 500px;
    margin-top: -150px;
  }
}
</style>
